<template>
  <div id="LoginRecord">
    <el-breadcrumb
      separator="/"
      style="padding-left: 10px; padding-bottom: 10px; font-size: 12px"
    >
      <el-breadcrumb-item>日志管理</el-breadcrumb-item>
      <el-breadcrumb-item>登录日志</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card class="box-card" shadow="hover">
      <el-form
        :inline="true"
        :model="queryMap"
        size="small"
        class="demo-form-inline"
      >
        <el-form-item label="姓名">
          <el-input
            v-model="queryMap.username"
            placeholder="请输入姓名"
          ></el-input>
        </el-form-item>
        <el-form-item label="班级">
          <el-input
            v-model="queryMap.className"
            placeholder="请输入班级"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="search"
            type="primary"
            icon="el-icon-search"
            :loading="loading"
            round
            >查询</el-button
          >
          <el-button
            @click="delLogListByIds"
            icon="el-icon-delete"
            :loading="loading"
            :disabled="this.selsIds.length === 0"
            round
            >批量删除</el-button
          >
        </el-form-item>
      </el-form>
      <template>
        <el-table
          :data="logList"
          border
          stripe
          size="mini"
          style="width: 100%; margin-top: 5px"
          @selection-change="selsChange"
        >
          <el-table-column
            type="selection"
            width="55"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="username"
            label="姓名"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="className"
            label="班级"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="loginRecordIP"
            label="IP"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="os"
            label="操作系统"
            align="center"
          ></el-table-column>
          <el-table-column prop="submitTime" label="登录时间" align="center">
            <template slot-scope="scope">{{
              scope.row.loginTime | dateFormat
            }}</template></el-table-column
          >
          <el-table-column label="设备" prop="loginType" align="center">
            <template slot-scope="scope"
              >{{ scope.row.loginType == 1 ? "Web端" : "小程序端" }}
            </template></el-table-column
          >
          <el-table-column label="操作" width="200" align="center">
            <template slot-scope="scope">
              <el-popconfirm
                confirmButtonText="删除"
                cancelButtonText="取消"
                icon="el-icon-info"
                iconColor="red"
                title="确定您当前的操作吗？"
                @onConfirm="delLogs(scope.row.loginRecordId)"
                @onCancel="cancelOperate"
              >
                <el-button
                  slot="reference"
                  icon="el-icon-delete"
                  type="text"
                  size="mini"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </template>
      <!-- 分页 -->
      <el-pagination
        style="margin-top: 10px"
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.queryMap.page"
        :page-sizes="[10, 50, 100]"
        :page-size="this.queryMap.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
    </el-card>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { queryLogsByPage, delLogsByIds } from "api/api";
export default {
  data() {
    return {
      queryMap: { page: 1, size: 10 },
      loading: false,
      total: 0,
      logList: [],
      selsIds: [],
    };
  },
  computed: {
    ...mapState(["userInfo"]),
  },
  methods: {
    //改变页码
    handleSizeChange(newSize) {
      this.queryMap.size = newSize;
      this.getLogsByPage();
    },
    //翻页
    handleCurrentChange(current) {
      this.queryMap.page = current;
      this.getLogsByPage();
    },
    search() {
      queryLogsByPage(this.userInfo.sessionId, this.queryMap).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
          this.loading = false;
        } else {
          this.total = res.data.total;
          this.logList = res.data.rows;
          this.loading = false;
        }
      });
    },
    selsChange(sels) {
      sels.forEach((sel) => {
        this.selsIds.push(sel.loginRecordId);
      });
    },
    //获取登录日志列表
    getLogsByPage() {
      queryLogsByPage(this.userInfo.sessionId, this.queryMap).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
          this.loading = false;
        } else {
          this.total = res.data.total;
          this.logList = res.data.rows;
          this.loading = false;
        }
      });
    },
    //删除日志信息
    delLogs(loginRecordId) {
      delLogsByIds(this.userInfo.sessionId, loginRecordId).then((res) => {
        if (!res.flag) {
          this.$message.error(res.message);
        } else {
          this.$message({
            type: "success",
            message: "删除成功！",
          });
          //重新加载数据
          this.getLogsByPage();
        }
      });
    },
    cancelOperate() {},
    //批量删除
    async delLogListByIds() {
      var res = await this.$confirm("此操作将批量删除数据，是否继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消操作！",
        });
      });
      if (res == "confirm") {
        delLogsByIds(this.userInfo.sessionId, this.selsIds).then((res) => {
          if (!res.flag) {
            this.$message.error(res.message);
          } else {
            this.$message({
              type: "success",
              message: "删除成功！",
            });
            //重新加载数据
            this.getLogsByPage();
          }
        });
      }
    },
  },
  mounted() {
    this.getLogsByPage();
  },
};
</script>